<template>
  <div class="created-form-content">
    <div v-if="isDisabled" class="form-model" />
    <el-form
      ref="generateForm"
      :model="models"
      :rules="rules"
      label-position="right"
      label-width="100px"
    >
      <template v-for="item in data.list">
        <template v-if="item.type == 'grid'">
          <el-row
            :key="item.key"
            type="flex"
            :gutter="item.options.gutter ? item.options.gutter : 0"
            :justify="item.options.justify"
            :align="item.options.align"
          >
            <el-col v-for="(col, colIndex) in item.columns" :key="colIndex" :span="col.span">
              <template v-for="citem in col.list">
                <el-form-item v-if="citem.type=='blank'" :key="citem.key" :label="citem.name" :prop="citem.model">
                  <slot :name="citem.model" :model="models" />
                </el-form-item>
                <CreatedFormItem
                  v-else
                  :key="citem.key"
                  :models.sync="models"
                  :remote="remote"
                  :rules="rules"
                  :form-data="citem"
                />
              </template>
            </el-col>
          </el-row>
        </template>
        <template v-else-if="item.type == 'blank'">
          <el-form-item :key="item.key" :label="item.name" :prop="item.model">
            <slot :name="item.model" :model="models" />
          </el-form-item>
        </template>
        <template v-else>
          <CreatedFormItem
            v-if="item && !item.ishidden"
            :key="item.key"
            :models.sync="models"
            :rules="rules"
            :form-data="item"
            :remote="remote"
            :form-config="data.config"
          />
        </template>
      </template>
    </el-form>
  </div>
</template>

<script>
import CreatedFormItem from './CreatedFormItem'
// eslint-disable-next-line no-unused-vars
const validatePurchDetail = (rule, value, callback) => {
  if (!value || value.length < 1) {
    callback(rule.message)
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validateRelateBill = (rule, value, callback) => {
  if (!value || value.length < 1) {
    callback(rule.message)
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validateBillTravelBusiness = (rule, value, callback) => {
  if (!value || value.length < 1) {
    callback(rule.message)
  } else {
    callback()
  }
}
// 验证数组
// eslint-disable-next-line no-unused-vars
var validateArray = (rule, value, callback) => {
  if (!value || value.length < 1) {
    callback(rule.message)
  } else {
    callback()
  }
}
// 验证对象
// eslint-disable-next-line no-unused-vars
var validateObject = (rule, value, callback) => {
  if (!value || !value.Id) {
    callback(rule.message)
  } else {
    callback()
  }
}
export default {
  name: 'FmGenerateForm',
  components: {
    CreatedFormItem
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['data', 'remote', 'value', 'insite', 'isDisabled'],
  data() {
    return {
      models: this.value,
      rules: {}
    }
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        this.generateModle(val.list)
      }
    },
    // value: {
    //   deep: true,
    //   handler(val) {
    //     this.models = { ...this.models, ...val }
    //   }
    // }
    models: {
      deep: true,
      handler(val) {
        this.$emit('update:value', this.models)
      }
    }
  },
  created() {
    this.generateModle(this.data.list)
  },
  mounted() {
  },
  methods: {
    generateModle(arr) {
      arr.length > 0 && arr.forEach(arrItem => {
        if (arrItem.type === 'grid') {
          arrItem.columns.forEach(item => {
            this.generateModle(item.list)
          })
        } else {
          if (this.value && Object.keys(this.value).indexOf(arrItem.model) >= 0) {
            this.models[arrItem.model] = this.value[arrItem.model]
          } else {
            if (arrItem.type === 'blank') {
              this.$set(this.models, arrItem.model, arrItem.options.defaultType === 'String' ? '' : (arrItem.options.defaultType === 'Object' ? {} : []))
            } else {
              this.models[arrItem.model] = arrItem.options.defaultValue
            }
          }
          if (arrItem.rules) {
            if (this.rules[arrItem.model]) {
              this.rules[arrItem.model] = [...this.rules[arrItem.model], ...arrItem.rules.map(item => {
                if (item.pattern) {
                  // eslint-disable-next-line no-eval
                  return { ...item, pattern: eval(item.pattern) }
                } else if (item.validator) {
                  // eslint-disable-next-line no-eval
                  return { ...item, validator: eval(item.validator) }
                } else {
                  return { ...item }
                }
              })]
            } else {
              this.rules[arrItem.model] = [...arrItem.rules.map(item => {
                if (item.pattern) {
                  // eslint-disable-next-line no-eval
                  return { ...item, pattern: eval(item.pattern) }
                } else if (item.validator) {
                  // eslint-disable-next-line no-eval
                  return { ...item, validator: eval(item.validator) }
                } else {
                  return { ...item }
                }
              })]
            }
          }
          if (arrItem.options.customRule) {
            // /
          }
        }
      })
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.$refs.generateForm.validate(valid => {
          if (valid) {
            resolve(this.models)
          } else {
            // reject(new Error(this.$t('fm.message.validError')).message)
          }
        })
      })
    },
    reset() {
      this.$refs.generateForm.resetFields()
      this.models = {}
    }
  }
}
</script>

<style lang="scss">
.created-form-content{
  position: relative;
  .form-model{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

}.center-container,.created-config-container{
    border:1px solid #e0e0e0 ;
  }
</style>
